
import 'package:flutter/material.dart';
import 'package:flutter_application_1/example/list/data.dart';


class Grid extends StatefulWidget {
  const Grid({super.key});

  @override
  State<Grid> createState() => _GridState();
}

class _GridState extends State<Grid> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Grid'),
      ),
      body: Column(
        // mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              ElevatedButton(
                onPressed: ()=>setState(() {_current = 0;}),
                child: Text('列表1'),
              ),
              ElevatedButton(
                onPressed: ()=>setState(() {_current = 1;}),
                child: Text('列表2'),
              ),
            ],
          ),
          Expanded(
            child: _current == 0 ? Grid1() : Grid2()
          )
          
        ],
      )
    );  
  }
}

class Grid1 extends StatelessWidget {
  const Grid1({super.key});

  @override
  Widget build(BuildContext context) {
    // return GridView.count( // 快速创建固定横轴子元素 个数 crossAxisCount
    //   crossAxisCount: 5, // 一行几个
    return GridView.extent( // 快速创建固定横轴子元素 最大宽度 maxCrossAxisExtent
      maxCrossAxisExtent: 300, // 子元素 最大宽度

      padding: EdgeInsets.all(1),
      crossAxisSpacing: 1, // 水平间距
      mainAxisSpacing: 1, // 垂直间距
      childAspectRatio: 1.2, // 宽高比
      children: [
        Icon(Icons.pedal_bike),
        Icon(Icons.home),
        Icon(Icons.ac_unit),
        Icon(Icons.search),
        Icon(Icons.settings),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.circle),
      ],
    );
  }
}

class Grid2 extends StatelessWidget {
  const Grid2({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(10),
      itemCount: dataList.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        crossAxisSpacing: 10, // 水平间距
        mainAxisSpacing: 10, // 垂直间距
        childAspectRatio: 1.2, // 宽高比
      ),
      itemBuilder: (context, index) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            border: Border.all(color: Colors.red),
          ),
          child: Column(
            children: [
              Image.network(dataList[index]['imagePath'].toString()),
              Text(dataList[index]['title'].toString()),
            ],
          ),
        );
      }
    );
  }
}
